﻿@using GoogleMapsHelpers

<script type="text/javascript" src="~/SH/scripts/shCore.js"></script>
<script type="text/javascript" src="~/SH/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="~/SH/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="~/SH/scripts/shBrushJScript.js"></script>
<link href="~/SH/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="~/SH/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

<h1>Single Address</h1>

<div>
    @Html.GoogleMaps(new { @class = "map" })
</div>

<h2>Code</h2>

@{
    var code =
@"
    <!-- Step 1: Add GoogleMapsHelpers namespace -->
    @using GoogleMapsHelpers

    <html>
        <head>
            <title>Single Address Example</title>
        </head>
        <body>
            <!-- Step 2: Decide where to display the map -->
            @Html.GoogleMaps(new { @style=""width: 100%; height: 300px;"" })

            <!-- Step 3: Set Map options -->
            @Html.GoogleMapsAPI(""Baltimore, MD"")
        </body>
    </html>
";
}

<pre class="brush: html;">
        @code
</pre>

<style>
    .map {
        width: 100%;
        height: 300px;
    }
</style>

@Html.GoogleMapsAPI("Baltimore, MD")

<script type="text/javascript">
    SyntaxHighlighter.all()
</script>